<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
		"http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Annotator/Figure Testing</title>
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@Import "../../../dijit/themes/tundra/tundra.css";
</style>
		<link href="../resources/sketch.css" type="text/css" rel="stylesheet">
		<style type="text/css">
			body {
				background:#fff url("images/testsBodyBg.gif") repeat-x top left;
				padding:1em 3em;
			}
			table { margin:0; width:100%;}
			table tr td { padding:0; }
			table tr td table { border:0; width:auto;}

			#container{ width:600px; }
			#toolbar{ width:100%; }
			#canvasContainer{ outline:none; width:600px; height:600px; background-color:#fff;border:1px solid #ccc; overflow:auto;position:relative;}
		</style>
		<script>var djConfig={ isDebug: false };</script>
		<script src="../../../dojo/dojo.js"></script>
		<script>
			dojo.require("dijit.robot");
			dojo.require("dojox.sketch");
			dojo.require("dojox.sketch.Slider");
			dojo.require("dojox.sketch.LeadAnnotation");
			dojo.require("dojox.sketch.UnderlineAnnotation");
			dojo.require("dojox.sketch.SingleArrowAnnotation");
			dojo.require("dojox.sketch.DoubleArrowAnnotation");
			dojo.require("dojox.sketch.PreexistingAnnotation");
			var f, a, t;
			function init(){
				var ta=dojox.sketch;
				f=new ta.Figure({gridSize:10});
				dojo.connect(f, "_mu", function(){ dojo.byId("output").value=f.serialize(); });

				t=ta.makeToolbar(dojo.byId("toolbar"), f);

				//	test loading from an SVG file
				dojo.xhrGet({
					url:"annotation.svg",
					preventCache:true,
					load:function(data, ioArgs){
						var svg=dojox.xml.DomParser.parse(data);
						f.load(svg, dojo.byId("canvas"));
						dojo.byId("output").value=f.serialize();
					}
				});

                setTimeout(function(){
                    doh.robot.startRobot();
                    setTimeout(function(){
                        rundoh();
                    },1000);
				},1000);
			}
			dojo.addOnLoad(init);
            
            function rundoh(){
                dojo.require("dojox.sketch.tests.FTHelper");
                var helper=new dojox.sketch.tests.FTHelper;
                doh.register("placeLeadShape",{
                    timeout: 1500,
                    runTest:function(t){
                        var d = new doh.Deferred();
                        helper.drawShape({x:100,y:100},{x:200,y:200});
                        doh.robot.sequence(d.getTestCallback(function(){
                            t.is('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dojoxsketch="http://dojotoolkit.org/dojox/sketch" width="1000" height="855"><g><image xlink:href="images/figure2.gif" x="0" y="0" width="1000" height="855" /><g id="ann-1" dojoxsketch:type="Lead" transform="translate(437,169)"><path style="stroke:blue;stroke-width:2;fill:none;" d="M0,0 Q100,-50 200,0" /><text style="fill:blue;text-anchor:start" font-weight="bold" x="204" y="-2">1</text></g><g id="ann-2" dojoxsketch:type="Preexisting" transform="translate(526,408)"><rect style="stroke:blue;stroke-width:1;fill:none;" x="0" width="104" y="0" height="210" rx="8" ry="8"  /><text style="fill:blue;text-anchor:end" font-weight="bold" x="100" y="206">2</text></g><g id="ann-3" dojoxsketch:type="SingleArrow" transform="translate(537,804)"><path style="stroke:blue;stroke-width:2;fill:none;" d="M-44,13 Q-137,38 -162,-23" /><g transform="translate(-44,13) rotate(164.9536)"><path style="fill:blue;" d="M0,0 l20,-5, -3,5, 3,5 Z" /></g><text style="fill:blue;text-anchor:middle" font-weight="bold" x="-160.36065573770492" y="-27">3</text></g><g id="ann-4" dojoxsketch:type="DoubleArrow" transform="translate(329,-7)"><path style="stroke:blue;stroke-width:2;fill:none;" d="M249,306 Q505,242 426,389" /><g transform="translate(249,306) rotate(-14.0362)"><path style="fill:blue;" d="M0,0 l20,-5, -3,5, 3,5 Z" /></g><g transform="rotate(118.2542, 426, 389)"><path style="fill:blue;" d="M426,389 l-20,-5, 3,5, -3,5 Z" /></g><text style="fill:blue;text-anchor:middle" font-weight="bold" x="421.25" y="288.75">4</text></g><g id="ann-5" dojoxsketch:type="Underline" transform="translate(821,517)"><text style="fill:blue;" font-weight="bold" text-decoration="underline" x="0" y="0">5</text></g><g id="annotation-6" dojoxsketch:type="Lead" transform="translate(170,170)"><path style="stroke:blue;stroke-width:2;fill:none;" d="M0,0 Q80,80 170,170" /><text style="fill:blue;text-anchor:middle" font-weight="bold" x="174" y="184"></text></g></g></svg>', f.getValue());
                        }), 500);
                        return d;
                    }
                });
                doh.register("removeLeadShape",{
                    timeout: 1500,
                    runTest:function(t){
                        var d = new doh.Deferred();
                        helper.click({left:true,x:100,y:100},100);
                        doh.robot.keyPress(dojo.keys.DELETE,100);
                        doh.robot.sequence(d.getTestCallback(function(){
                                t.is('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dojoxsketch="http://dojotoolkit.org/dojox/sketch" width="1000" height="855"><g><image xlink:href="images/figure2.gif" x="0" y="0" width="1000" height="855" /><g id="ann-1" dojoxsketch:type="Lead" transform="translate(437,169)"><path style="stroke:blue;stroke-width:2;fill:none;" d="M0,0 Q100,-50 200,0" /><text style="fill:blue;text-anchor:start" font-weight="bold" x="204" y="-2">1</text></g><g id="ann-2" dojoxsketch:type="Preexisting" transform="translate(526,408)"><rect style="stroke:blue;stroke-width:1;fill:none;" x="0" width="104" y="0" height="210" rx="8" ry="8"  /><text style="fill:blue;text-anchor:end" font-weight="bold" x="100" y="206">2</text></g><g id="ann-3" dojoxsketch:type="SingleArrow" transform="translate(537,804)"><path style="stroke:blue;stroke-width:2;fill:none;" d="M-44,13 Q-137,38 -162,-23" /><g transform="translate(-44,13) rotate(164.9536)"><path style="fill:blue;" d="M0,0 l20,-5, -3,5, 3,5 Z" /></g><text style="fill:blue;text-anchor:middle" font-weight="bold" x="-160.36065573770492" y="-27">3</text></g><g id="ann-4" dojoxsketch:type="DoubleArrow" transform="translate(329,-7)"><path style="stroke:blue;stroke-width:2;fill:none;" d="M249,306 Q505,242 426,389" /><g transform="translate(249,306) rotate(-14.0362)"><path style="fill:blue;" d="M0,0 l20,-5, -3,5, 3,5 Z" /></g><g transform="rotate(118.2542, 426, 389)"><path style="fill:blue;" d="M426,389 l-20,-5, 3,5, -3,5 Z" /></g><text style="fill:blue;text-anchor:middle" font-weight="bold" x="421.25" y="288.75">4</text></g><g id="ann-5" dojoxsketch:type="Underline" transform="translate(821,517)"><text style="fill:blue;" font-weight="bold" text-decoration="underline" x="0" y="0">5</text></g></g></svg>', f.getValue());
                        }),300);
                        return d;
                    }
                });
                doh.register("placeDoubleShape",{
                    timeout: 1500,
                    runTest:function(t){
                        var d = new doh.Deferred();
                        helper.selectShape('double');
                        helper.drawShape({x:200,y:100},{x:100,y:200});
                        doh.robot.sequence(d.getTestCallback(function(){
                                t.is('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dojoxsketch="http://dojotoolkit.org/dojox/sketch" width="1000" height="855"><g><image xlink:href="images/figure2.gif" x="0" y="0" width="1000" height="855" /><g id="ann-1" dojoxsketch:type="Lead" transform="translate(437,169)"><path style="stroke:blue;stroke-width:2;fill:none;" d="M0,0 Q100,-50 200,0" /><text style="fill:blue;text-anchor:start" font-weight="bold" x="204" y="-2">1</text></g><g id="ann-2" dojoxsketch:type="Preexisting" transform="translate(526,408)"><rect style="stroke:blue;stroke-width:1;fill:none;" x="0" width="104" y="0" height="210" rx="8" ry="8"  /><text style="fill:blue;text-anchor:end" font-weight="bold" x="100" y="206">2</text></g><g id="ann-3" dojoxsketch:type="SingleArrow" transform="translate(537,804)"><path style="stroke:blue;stroke-width:2;fill:none;" d="M-44,13 Q-137,38 -162,-23" /><g transform="translate(-44,13) rotate(164.9536)"><path style="fill:blue;" d="M0,0 l20,-5, -3,5, 3,5 Z" /></g><text style="fill:blue;text-anchor:middle" font-weight="bold" x="-160.36065573770492" y="-27">3</text></g><g id="ann-4" dojoxsketch:type="DoubleArrow" transform="translate(329,-7)"><path style="stroke:blue;stroke-width:2;fill:none;" d="M249,306 Q505,242 426,389" /><g transform="translate(249,306) rotate(-14.0362)"><path style="fill:blue;" d="M0,0 l20,-5, -3,5, 3,5 Z" /></g><g transform="rotate(118.2542, 426, 389)"><path style="fill:blue;" d="M426,389 l-20,-5, 3,5, -3,5 Z" /></g><text style="fill:blue;text-anchor:middle" font-weight="bold" x="421.25" y="288.75">4</text></g><g id="ann-5" dojoxsketch:type="Underline" transform="translate(821,517)"><text style="fill:blue;" font-weight="bold" text-decoration="underline" x="0" y="0">5</text></g><g id="annotation-7" dojoxsketch:type="DoubleArrow" transform="translate(340,170)"><path style="stroke:blue;stroke-width:2;fill:none;" d="M0,0 Q-80,80 -170,170" /><g transform="translate(0,0) rotate(135)"><path style="fill:blue;" d="M0,0 l20,-5, -3,5, 3,5 Z" /></g><g transform="rotate(135, -170, 170)"><path style="fill:blue;" d="M-170,170 l-20,-5, 3,5, -3,5 Z" /></g><text style="fill:blue;text-anchor:middle" font-weight="bold" x="-82.5" y="76.5"></text></g></g></svg>', f.getValue());
                        }),500);
                        return d;
                    }
                });
                doh.register("placeUnderlineShape",{
                    timeout: 2000,
                    runTest:function(t){
                        var d = new doh.Deferred();
                        doh.robot.keyPress('z',100,{ctrl:true});
                        helper.selectShape('underline');
                        helper.drawShape({x:147,y:147},{x:147,y:147});
                        doh.robot.sequence(d.getTestCallback(function(){
                                t.is('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dojoxsketch="http://dojotoolkit.org/dojox/sketch" width="1000" height="855"><g><image xlink:href="images/figure2.gif" x="0" y="0" width="1000" height="855" /><g id="ann-1" dojoxsketch:type="Lead" transform="translate(437,169)"><path style="stroke:blue;stroke-width:2;fill:none;" d="M0,0 Q100,-50 200,0" /><text style="fill:blue;text-anchor:start" font-weight="bold" x="204" y="-2">1</text></g><g id="ann-2" dojoxsketch:type="Preexisting" transform="translate(526,408)"><rect style="stroke:blue;stroke-width:1;fill:none;" x="0" width="104" y="0" height="210" rx="8" ry="8"  /><text style="fill:blue;text-anchor:end" font-weight="bold" x="100" y="206">2</text></g><g id="ann-3" dojoxsketch:type="SingleArrow" transform="translate(537,804)"><path style="stroke:blue;stroke-width:2;fill:none;" d="M-44,13 Q-137,38 -162,-23" /><g transform="translate(-44,13) rotate(164.9536)"><path style="fill:blue;" d="M0,0 l20,-5, -3,5, 3,5 Z" /></g><text style="fill:blue;text-anchor:middle" font-weight="bold" x="-160.36065573770492" y="-27">3</text></g><g id="ann-4" dojoxsketch:type="DoubleArrow" transform="translate(329,-7)"><path style="stroke:blue;stroke-width:2;fill:none;" d="M249,306 Q505,242 426,389" /><g transform="translate(249,306) rotate(-14.0362)"><path style="fill:blue;" d="M0,0 l20,-5, -3,5, 3,5 Z" /></g><g transform="rotate(118.2542, 426, 389)"><path style="fill:blue;" d="M426,389 l-20,-5, 3,5, -3,5 Z" /></g><text style="fill:blue;text-anchor:middle" font-weight="bold" x="421.25" y="288.75">4</text></g><g id="ann-5" dojoxsketch:type="Underline" transform="translate(821,517)"><text style="fill:blue;" font-weight="bold" text-decoration="underline" x="0" y="0">5</text></g><g id="annotation-8" dojoxsketch:type="Underline" transform="translate(250,250)"><text style="fill:blue;" font-weight="bold" text-decoration="underline" x="0" y="0">#</text></g></g></svg>', f.getValue());
                        }),500);
                        return d;
                    }
                });
                doh.run();
            }
		</script>
	</head>
	<body class="tundra">
		<button onclick="rundoh()">FT</button>
		<h1>Annotator/Figure Testing Platform</h1>
		<p>This is a generic test to create a figure from an existing SVG file, to edit that figure, and to test the undo stack. Double click a shape to set new text for it.</p>
		<div id="container">
			<div id="toolbar"></div>
			<div id="canvasContainer"><div id="canvas" tabindex="-1"></div></div>
		</div>
		<h2>Serialized output</h2>
		<textarea id="output" style="width:100%;height:180px;overflow:auto;font-size:0.8em;"></textarea>
	</body>
</html>
